import React from 'react'
import styled from 'styled-components'
import { BiSearch } from 'react-icons/bi'
export default function Navbar() {
  return (
    <Nav>
      <div className='title'>
        <h4>Hi 长安宁,</h4>
        <h1>
          欢迎访问 <span>SING TAXI DASHBOARD</span>
        </h1>
      </div>
      <div className='search'>
        <BiSearch />
        <input type='text' placeholder='Search' />
      </div>
    </Nav>
  )
}

const Nav = styled.nav`
  display: flex;
  justify-content: space-between;
  color: #fff;
  .title {
    h1 {
      span {
        margin-left: 0.5rem;
        letter-spacing: 0.1rem;
        color: #ffc107;
        font-family: 'Permanent Marker', cursive;
      }
    }
  }

  .search {
    display: flex;
    align-items: center;
    background-color: #212121;
    gap: 1rem;
    padding: 0rem 8rem 0rem 1rem;
    border-radius: 1rem;
    svg {
      color: #ffc107;
    }
    input {
      /* ?????给个高度测试一下效果，后期可能会删除 */
      height: 2rem;
      background-color: transparent;
      border: none;
      color: #ffc107;
      font-family: 'Permanent Marker', cursive;
      letter-spacing: 0.1rem;
      &::placeholder {
        color: #ffc107;
        font-family: 'Permanent Marker', cursive;
        letter-spacing: 0.3rem;
      }
      &:focus {
        outline: none;
      }
    }
  }

  @media screen and (min-width: 280px) and (max-width: 1080px) {
    /* display: flex; */
    /* flex-direction: row; */
    flex-direction: column;
    .title {
      h1 {
        span {
          display: block;
          margin: 1rem 0;
        }
      }
    }
  }
`
